.resource_items_cont {
    display: flex;
    flex-flow: row;
    white-space: nowrap;
    filter: grayscale(0.3);
}

.tags_item_cont {
    display: inline-block;
    white-space: nowrap;
    font-family: Prototype;
    margin-bottom: 15px;
    padding: 5px;
}

.resource_item {
    display: flex;
    border-radius: 5px;
    vertical-align: top;
    font-family: Prototype;
    background: linear-gradient(rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0.3) 50%);
    color: #e6e1e1;
    margin-left: 10px;
    min-width: 70px;
    padding: 8px 0px 4px 8px;
    box-sizing: border-box;

    &.resource_item--energy:after {
        content: " ";
        background: linear-gradient(rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0.3) 50%);
        clip-path: polygon(0% 50%, 100% 75%, 100% 75%, -5% 100%);
        width: 10px;
        height: 86px;
        margin: 0;
        padding: 0;
        position: absolute;
        transform: translateX(76px) translateY(-8px);
        z-index: 0;
    }
}

.resource_item_stock {
    white-space: nowrap;
}

.resource_item_stock_count {
    font-size: 30px;
    text-align: center;
    line-height: 1;
    text-shadow: 0 2px 2px black;
}

.resource_item_prod {
    border-radius: 10px 10px 0 0;
    color: #bb8760;
    text-shadow: 0 0 1px black;
    min-width: 40px;
    text-align: center;
}

.resource_item_prod_count {
    display: inline-block;
}

.resource_icon {
    width: 36px;
    height: 36px;
    display: inline-block;
    background-size: contain;
}

.resource_icon--rating {
    background-image: url(./assets/resources/tr.png);
}

.resource_icon--megacredits {
    background-image: url(./assets/resources/megacredit.png);
}

.resource_icon--megacredit-value {
    background-image: url(./assets/resources/megacredit.png);
    background-size: 20px 20px;
    width: 20px;
    height: 20px;
    color: black;
    font-size: 15px;
    font-style: normal;
    font-family: Prototype;
    text-align: center;
    line-height: 21px;
    margin-left: -14px;
    margin-top: -37px;
    text-align: center;
    position: relative;
}

@resource_types: titanium, steel, heat, data, science, seed, graphene, asteroid, hydroelectric-resource;
each(@resource_types, {
  .resource_icon--@{value} {
    background-image: url("assets/resources/@{value}.png");
  }
})
.resource_icon--floaters {
  background-image: url(./assets/resources/floater.png);
}
.resource_icon--microbes {
  background-image: url(./assets/resources/microbe.png);
}
.resource_icon--plants {
  background-image: url(./assets/resources/plant.png);
}
.resource_icon--energy {
    background-image: url(./assets/resources/power.png);
}
.resource_icon--corruption {
  background-image: url(./assets/underworld/corruption.png);
}
.resource_icon--auroraidata {
  background-image: url("assets/resources/data.png");
}

.shield_parent {
    position: relative;
    top: 12px;
    left: 0;
}

.shield_icon {
    background-image: url(./assets/misc/shield-icon.png);
    filter: invert(1);
    background-size: 25px;
    width: 25px;
    height: 25px;
    position: relative;
    bottom: -18%;
    right: -20%;
}

.shield_icon_half {
    &:extend(.shield_icon);
    background-image: url(./assets/misc/half-shield-icon.png);
}

.shield_resource_protection {
    background-image: url(./assets/resources/wild.png);
    background-size: 10px 10px;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0px;
    left: 6px;
}

.shield_production_protection {
    background-image: url(./assets/misc/production.png);
    background-size: 10px 10px;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0px;
    left: 23px;
    filter: brightness(1.1);
}

.alloys {
    filter: brightness(2);
    height: 30px;
    position: relative;
    bottom: -10%;
    right: -5%;
    font-size: 16px;
    line-height: 80%;
    transform: rotate(-180deg);
}
